<template>
	<view class="nav-list" style="" :class="shouye == 'true'?'nav-lists':''" >
    <view class="nav-list-title" v-if="shouye == 'true'">先用后付 事成付费 效果保障</view>
		<view class="nav-item" :class="shouye == 'true'?'nav-items':''" @click="item.name?jump('/pages/client/index/list', { id: item.id }):''" v-for="(item, index) in navProduct" v-if="item.name=='问一下'||item.name=='陪同办'||item.name=='问一下'||item.name=='写合同'||item.name=='刑事会见'||item.name=='打官司'">
			<image :src="item.dou_image" :class="item.img_format=='gif'?'anglemark':'anglemarks'" mode="" v-if="item.dou_image!=''"></image>
			<view class="image-wrapper"><image :src="item.image" mode="aspectFit"></image></view>
			<view class="nav-tip">{{ item.name }}</view>
		</view>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
export default {
	  props:{
      shouye:{
        type:String,
        default:"false"
      }
    },
	data() {
		return {
			info:{}
		};
	},
	computed:{
		...mapGetters(['navProduct'])
	},
	created() {
	},
	methods:{
	}
};
</script>

<style lang="scss">

	// 七个产品导航
	.nav-list {
		display: flex;
		flex-wrap: wrap;
		padding-top: 20rpx;
    .nav-list-title{
      width: 100%;
      font-weight: bold;
      padding-bottom: 20px;
      font-size: 30rpx;
    }
		.nav-item {
			width: 24%;
			margin-bottom: 10rpx;
			.image-wrapper {
				width: 80rpx;
				height: 80rpx;
				margin: 0 auto 10rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.nav-tip {
				text-align: center;
				font-size: 28rpx;
				font-weight: bold;
			}
		}
	}
	.nav-list {
		padding-top: 40rpx;
		.nav-item {
			position: relative;
			margin-bottom: 50rpx;
		}
	}
	.anglemark{
		width: 99rpx;
		height: 50rpx;

		position: absolute;
		right: -10rpx;
		z-index: 1;
		top: -25rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.anglemarks{
		width: 105rpx;
		height: 43rpx;
		position: absolute;
		right: -10rpx;
		z-index: 1;
		top: -20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
  .nav-lists{
    justify-content:space-between;
    align-items: center;
    margin: 0 20rpx 20rpx;
    padding: 40rpx 16rpx 24rpx;
    background: #fff;
    border-radius: 16rpx;
    .nav-items:nth-child(6),.nav-items:nth-child(7),.nav-items:nth-child(8){
      margin-bottom:10rpx;
    }

  }
  .nav-lists  .nav-items{
    //flex: 1;
    //text-align: center;
    //margin: 0 20px 20px 0; // 间隙为20px
    //box-sizing: border-box;
    //
    //width: calc((100% - 60px) / 4);   // 我这里一行显示4个 所以是/4  一行显示几个就除以几
    //// 这里的60px = (分布个数4-1)*间隙20px, 可以根据实际的分布个数和间隙区调整
    //min-width: calc((100% - 60px) / 4);
    //max-width: calc((100% - 60px) / 4);
    //
    //&:nth-child(4n + 4) {
    //  margin-right: 0;
    //}
    display: flex;
    /* height: 29px; */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    width: 24%;
  }
  .nav-items .anglemark{
  }
</style>
